<div class="container">
  <div class="row">
    <div class="col-md-4 col-lg-2">
      <h3>Categories</h3>
      <ul>
        <li><a href="#">Shoes</a></li>
        <li><a href="#">Clothing</a></li>
        <li><a href="#">Accessories</a></li>
        <li><a href="#">Men</a></li>
        <li><a href="#">Women</a></li>
        <li><a href="#">Kids</a></li>
        <li><a href="#">Pets</a></li>
      </ul>
    </div>
    <div class="col-md-4 col-lg-2">
      <h3>Styles</h3>
      <ul>
        <li><a href="#">Athletic</a>  </li>
        <li><a href="#">Casual</a></li>
        <li><a href="#">Dress</a></li>
        <li><a href="#">Everyday</a></li>
        <li><a href="#">Other Days</a></li>
        <li><a href="#">Alternative</a></li>
        <li><a href="#">Otherwise</a></li>
      </ul>
    </div>
    <div class="col-md-4 col-lg-2">
      <h3>Other</h3>
      <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Another link</a></li>
        <li><a href="#">Link again</a></li>
        <li><a href="#">Try this</a></li>
        <li><a href="#">Don't you dare</a></li>
        <li><a href="#">Oh go ahead</a></li>
      </ul>
    </div>

    <!-- Add the extra clearfix for only the required viewport -->
    <div class="clearfix hidden-sm-down hidden-lg-up"></div>

    <div class="about col-xs-12 col-lg-6">
      <h3>About Us</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod congue bibendum. Aliquam erat volutpat. Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec ultricies metus gravida egestas. Duis congue viverra arcu, ac aliquet turpis rutrum a. Donec semper vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis. Phasellus vel tellus id felis cursus hendrerit.</p>
      <p><a class="btn btn-secondary btn-sm pull-right" href="#">Learn more <span class="fa fa-arrow-circle-right"></span></a></p>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->
